<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
      style="max-width: 480px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          <div
            class="ant-pro-core-label-tip"
          >
            <div
              class="ant-pro-core-label-tip-title"
            >
              Market Trend
            </div>
            <span
              aria-describedby="test-id"
              class="ant-pro-core-label-tip-icon"
            >
              <span
                aria-label="info-circle"
                class="anticon anticon-info-circle"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="info-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  />
                  <path
                    d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
        <div
          class="ant-pro-card-extra"
        >
          <span
            aria-label="ellipsis"
            class="anticon anticon-ellipsis"
            role="img"
          >
            <svg
              aria-hidden="true"
              data-icon="ellipsis"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
              />
            </svg>
          </span>
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-statistic-card-content "
        >
          <div
            class="ant-pro-statistic-card-chart"
          >
            <img
              alt="Bar Chart"
              src="https://gw.alipayobjects.com/zos/alicdn/a-LN9RTYq/zhuzhuangtu.svg"
              width="100%"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Chart Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            tooltip
          </strong>
          : 提示信息，鼠标悬停时显示
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象
        </li>
        <li>
          <strong>
            extra
          </strong>
          : 卡片右上角操作区域
        </li>
        <li>
          <strong>
            chart
          </strong>
          : 图表区域，可以是图片或图表组件
        </li>
      </ul>
      <h4>
        Chart 属性说明：
      </h4>
      <ul>
        <li>
          <strong>
            图片图表
          </strong>
          : 使用 img 标签显示静态图表
        </li>
        <li>
          <strong>
            动态图表
          </strong>
          : 可以集成 ECharts、AntV 等图表库
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 图表会自动适配容器宽度
        </li>
      </ul>
      <h4>
        Img 标签属性：
      </h4>
      <ul>
        <li>
          <strong>
            src
          </strong>
          : 图片源地址
        </li>
        <li>
          <strong>
            alt
          </strong>
          : 图片替代文本，用于无障碍访问
        </li>
        <li>
          <strong>
            width
          </strong>
          : 图片宽度，'100%' 表示占满容器宽度
        </li>
      </ul>
      <h4>
        图表类型支持：
      </h4>
      <ul>
        <li>
          <strong>
            静态图片
          </strong>
          : SVG、PNG、JPG 等格式的图表图片
        </li>
        <li>
          <strong>
            ECharts
          </strong>
          : 可以集成 ECharts 动态图表
        </li>
        <li>
          <strong>
            AntV
          </strong>
          : 可以集成 AntV 图表库
        </li>
        <li>
          <strong>
            自定义组件
          </strong>
          : 可以传入自定义的图表组件
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            数据可视化
          </strong>
          : 展示各类统计图表
        </li>
        <li>
          <strong>
            趋势分析
          </strong>
          : 展示数据趋势和变化
        </li>
        <li>
          <strong>
            对比分析
          </strong>
          : 展示数据对比和分布
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>